<template>
  <view
    :style="'direction:' + $t('dir')"
    :class="$t('dir') == 'rtl' ? 'rtl' : 'ltr'"
    @click="pageClick"
  >
    <navbar
      v-if="stickyTop"
      :back="false"
      :navbarBg="
        stickyTop ? 'linear-gradient(#455EF7, #455EF7)' : 'transparent'
      "
      :title="''"
      bgLayer="linear-gradient(#fff, #fff)"
      :minHeight="0"
      :customStyle="'direction:' + $t('dir') + '!important'"
      :customContent="true"
      :statusBarBg="'#455EF7'"
    >
      <template v-slot:content>
        <view
          style="
            width: 90vw;
            display: flex;
            justify-content: center;
            align-items: center;
          "
        >
          <image
            src="/static/images/index/logo1.svg"
            style="width: 300rpx; height: 160rpx"
          />
        </view>
      </template>
    </navbar>

     <!-- 这里需要ststusBarHeight 蓝色的 -->
 <view class="ssst" :style="{ height: headerArea.status_height + 'px' }"></view>
 
    <view class="main">
      <x-drag />
      <view class="dir-ltr">
        <u-swiper
          :list="swpList"
          circular
          keyName="img"
          previousMargin="0"
          nextMargin="0"
          height="56vw"
          @click="tapBanner"
          :duration="500"
          :interval="3000"
          indicatorActiveColor="#DFDFDF"
          indicatorInactiveColor="#FFFFFF"
        >
        </u-swiper>
      </view>
      <!-- 123 -->
      <view class="grid">
        <u-grid :border="false" @click="clickGrid" col="4">
          <u-grid-item
            v-for="(baseListItem, baseListIndex) in baseList"
            :key="baseListIndex"
          >
            <u--image
              :showLoading="true"
              :src="baseListItem.src"
              width="80rpx"
              height="80rpx"
            ></u--image>

            <text class="grid-text">{{
              $t("dir") == "rtl" ? baseListItem.title : baseListItem.titleCn
            }}</text>
          </u-grid-item>
        </u-grid>
        <u-toast ref="uToast" />
      </view>

      <view style="padding-bottom: 130rpx; min-height: 1200rpx">
        <view class="d-flex flex-wrap items-center justify-between ma-md">
          <card-grid
            v-for="(item, i) in dataList.data"
            :item="item"
            :key="i"
            @click="toDetail(item)"
          />
        </view>
        <u-empty
          v-if="
            dataList.data &&
            dataList.data.length == 0 &&
            dataList.loadmoreStatus != 'loading'
          "
          mode="list"
          icon="/static/images/empty.png"
          :text="$t('no_content')"
          style="padding-top: 250rpx"
        />
        <u-loadmore
          v-else
          :status="dataList.loadmoreStatus"
          :loading-text="$t('loadingText')"
          loadmore-text="."
          nomoreText="."
          :isDot="true"
          :line="dataList.loadmoreStatus == 'nomore'"
          color="#bfbfbf"
        />
      </view>
    </view>

    <!-- 返回顶部 -->
    <u-back-top :scroll-top="scrollTop" />

    <!-- 底部导航栏 -->
    <tabbar :activeTab="0" />
  </view>
</template>

 
<script>
import config from "@/utils/config";

export default {
  data() {
    return {
      swpList: [
        "https://img95.699pic.com/photo/60002/6533.jpg_wh860.jpg",
        "https://img95.699pic.com/photo/40043/0203.jpg_wh860.jpg",
        "https://ts1.tc.mm.bing.net/th/id/R-C.b13081a7d26c714937e97cf2fc385069?rik=hxTAnt8bZ393%2fQ&riu=http%3a%2f%2fimg95.699pic.com%2fphoto%2f40102%2f7374.jpg_wh860.jpg&ehk=gawpjkG3TBKZ4jxjRMHrO6rGr2iuFtTMDXkJr65qRNY%3d&risl=&pid=ImgRaw&r=0",
      ],
      baseList: [
        {
          src: "/static/images/grid/店铺.png",
          titleCn: "店铺",
          title: "دۇكان-ساراي",
          id: 1,
        },
        {
          src: "/static/images/grid/招员工.png",
          titleCn: "找工作",
          title: "خىزمەتلەر",
          id: 2,
        },
        {
          src: "/static/images/grid/找工作.png",
          titleCn: "招员工",
          title: "خىزمەتچىلەر",
          id: 3,
        },
        {
          src: "/static/images/grid/综合信息.png",
          titleCn: "综合信息",
          title: "ئونۋېرسال ئۇچۇر",
          id: 4,
        },
        {
          src: "/static/images/grid/房产.png",
          titleCn: "房产",
          title: "ئۆي-مۈلۈك",
          id: 5,
        },
        {
          src: "/static/images/grid/车.png",
          titleCn: "车",
          title: "ماشىنا",
          id: 6,
        },
        {
          src: "/static/images/grid/出租房.png",
          titleCn: "出租房",
          title: "ئىجارە-ئۆي",
          id: 7,
        },
        {
          src: "/static/images/grid/买卖.png",
          titleCn: "买卖",
          title: "سودا-سېتىق",
          id: 8,
        },
        {
          src: "/static/images/grid/二手车.png",
          titleCn: "二手",
          title: "نىمكەش ماللا",
          id: 9,
        },
        {
          src: "/static/images/grid/农业.png",
          titleCn: "农业",
          title: "يېزا-ئىگىلىك",
          id: 10,
        },
        {
          src: "/static/images/grid/微商.png",
          titleCn: "微商",
          title: "ئۈندىدار سودا",
          id: 11,
        },
        {
          src: "/static/images/grid/牲畜.png",
          titleCn: "牲畜",
          title: "مال-چارۋا",
          id: 12,
        },
        {
          src: "/static/images/grid/家电.png",
          titleCn: "家电",
          title: "ئېلىكتىر سايمان",
          id: 13,
        },
        {
          src: "/static/images/grid/园地.png",
          titleCn: "园地",
          title: "باغ ئۇچۇرى",
          id: 14,
        },
        {
          src: "/static/images/grid/零工.png",
          titleCn: "零工",
          title: "كۈنلۈك ئىش",
          id: 15,
        },
        {
          src: "/static/images/grid/信息群.png",
          titleCn: "信息群",
          title: "ئۇچۇر توپى",
          id: 16,
        },
      ],
      baseUrl: config.baseUrl,
      adModalLoading: false,
      adList: [],
      modalAdShow: false,
      loginPopupShow: false,
      stickyTop: false,
      scrollTop: 0,
      langs: [
        { v: "ئۇيغۇرچە", k: "ug" },
        { v: "中文", k: "zh" },
      ],
      activeType: 0,

      dataList: {
        current_page: 1,
        data: [],
        last_page: 1,
        loadmoreStatus: "loadmore",
      },

      selectedRegion: {},
      selectedRegionData: { cityCode: "", disCode: "" },
      acticeAdObj: {
        name: "",
        name_zh: "",
      },
    };
  },
  computed: {
    headerArea() {
      let area = uni.getSystemInfoSync();
      // #ifdef MP-WEIXIN
      let menu = uni.getMenuButtonBoundingClientRect();
      return {
        status_height: area.statusBarHeight,
        title_height: menu.height + (menu.top - area.statusBarHeight) * 2,
        menuLeft: menu.left,
        menuTop: menu.top - (menu.top - area.statusBarHeight),
      };
      // #endif
      // #ifndef MP-WEIXIN
      return {
        status_height: area.statusBarHeight,
        title_height: uni.upx2px(82),
        menuLeft: 0,
        menuTop: uni.upx2px(88),
      };
      // #endif
    },
  },
  async onLoad(e) {
    await this._index();
    await this._indexPage();
  },
  mounted() {},
  onShow() {
    let location = uni.getStorageSync("location");
    if (location) this.selectedRegion = location;
    uni.hideTabBar({
      success: () => {},
      fail: () => {},
    });
    uni.setNavigationBarTitle({
      title: this.$t("home"),
    });
    let that = this;
    if (that.stickyTop) {
      const query = uni.createSelectorQuery();
      query
        .selectViewport()
        .scrollOffset((res) => {
          that.scrollTop = res.scrollTop;
          that.stickyTop = that.scrollTop > 65 ? true : false;
        })
        .exec();
    }
  },
  onPageScroll(e) {
    uni.$emit("pageClick", {});
    this.scrollTop = e.scrollTop;
    this.stickyTop = this.scrollTop > 65 ? true : false;
  },
  created() {},
  async onReachBottom() {
    if (this.dataList.current_page < this.dataList.last_page) {
      this.dataList.current_page += 1;
      await this._indexPage();
    }
  },
  async onPullDownRefresh() {
    await this._index();
    this.dataList.current_page = 1;
    await this._indexPage();
    uni.stopPullDownRefresh();
  },
  methods: {
    clickGrid(e) {
      console.log(e);
      switch (e) {
        case 0:
          uni.navigateTo({
            url: "/detailList/pages/dukan",
          });
          break;
        case 1:
          uni.navigateTo({
            url: "/detailList/pages/hizmat",
          });
          break;
        case 2:
          uni.navigateTo({
            url: "/detailList/pages/hizmatqiDetail",
          });
          break;
        case 3:
          uni.navigateTo({
            url: "/detailList/pages/unwersal",
          });
          break;
        case 4:
          uni.navigateTo({
            url: "/detailList/pages/oymuluk",
          });
          break;
        case 5:
          uni.navigateTo({
            url: "/detailList/pages/maxina",
          });
          break;
        case 6:
          uni.navigateTo({
            url: "/detailList/pages/ejara",
          });
          break;
        case 7:
          uni.navigateTo({
            url: "/detailList/pages/soda",
          });
          break;
        case 8:
          uni.navigateTo({
            url: "/detailList/pages/nimkax",
          });
          break;
        case 9:
          uni.navigateTo({
            url: "/detailList/pages/nongye",
          });
          break;
        case 10:
          uni.navigateTo({
            url: "/detailList/pages/undidarDetail",
          });
          break;
        case 11:
          uni.navigateTo({
            url: "/detailList/pages/qarwa",
          });
          break;
        case 12:
          uni.navigateTo({
            url: "/detailList/pages/elikterDetail",
          });
          break;
        case 13:
          uni.navigateTo({
            url: "/detailList/pages/bahDetail",
          });
          break;
        case 14:
          uni.navigateTo({
            url: "/detailList/pages/exqiDetail",
          });
          break;
        case 15:
          uni.navigateTo({
            url: "/detailList/pages/uqurTop",
          });
          break;
      }
    },
    async _index() {
      await this.$uniapi("/get_banner").then((res) => {
        if (res.code == 200) {
          console.log("banner", res.list);
          const outputArray = res.list.map((item) => item.fullUrl);
          this.swpList = outputArray;
        }
      });
    },
    async _indexPage() {
      this.dataList.loadmoreStatus = "loading";
      let page = this.dataList.current_page;
      let params = {
        page: page,
        pageSize: 10,
      };
      await this.$uniapi("/get_info_list", params)
        .then((res) => {
          this.dataList.loadmoreStatus = "loadmore";
          if (res.code == 200) {
            let uqur = res.list;

            if (page == 1) {
              this.dataList.data = uqur.data;
              console.log("uqur", uqur.data);
            } else this.dataList.data.push(...uqur.data);
            this.dataList.current_page = uqur.current_page;
            this.dataList.last_page = uqur.last_page;
            if (uqur.current_page == uqur.last_page)
              this.dataList.loadmoreStatus = "nomore";
          }
        })
        .catch((err) => {
          this.dataList.loadmoreStatus = "loadmore";
        });
    },
    onLangChange(e) {
      let lang = e.k;
      if (!lang) lang = uni.getStorageSync("lang") == "ug" ? "zh" : "ug";
      this._i18n.locale = lang;
      uni.setStorageSync("lang", lang);
      uni.reLaunch({
        url: "/pages/index/index",
      });
    },
    pageClick() {
      uni.$emit("pageClick", {});
    },

    toDetail(item) {
      // let token = uni.getStorageSync('token')
      // if (!token) {
      //     this.loginPopupShow = true
      //     return
      // }
      uni.navigateTo({
        url: "/pages/info/show?id=" + item.id,
      });
    },
  },
  beforeDestroy() {
    uni.$off("$pageClick");
  },
};
</script>
<style scoped lang="scss">
.grid-text {
  font-size: 14px;
  color: #000;
  padding: 10rpx 0 20rpx 0rpx;
  /* #ifndef APP-PLUS */
  box-sizing: border-box;
  /* #endif */
}
.grid {
  padding-top: 25rpx;
  width: 95vw;
  background: #fff;
  border-radius: 25rpx;
  margin: auto;
  box-shadow: 0px 0px 20px 1px #cccccc47;
}
.ssst{
  width: 100%;
  height: 100rpx;
  background:linear-gradient(#1e2d913b, #455df741);
}
</style>
